import React, { useState, useEffect } from 'react';
import './index.css';
import { Row, Col, Layout, Menu, Breadcrumb } from 'antd';
import {
  SettingOutlined,
  LaptopOutlined,
  EditOutlined,
  ReconciliationOutlined,
  ClusterOutlined,
  CloudUploadOutlined,
  ProjectOutlined,
  DeleteOutlined,
  SnippetsOutlined,
  HomeOutlined,
  UserOutlined,
  BranchesOutlined,
} from '@ant-design/icons';
import Logo from '../../components/logo';
import { NavLink, Outlet, useLocation, Link } from 'react-router-dom';
import User from '../../components/User';
import { useSelector } from 'react-redux';
import { selectRouter_permission } from '../../redux/Slice/userSlice';
import Config, { RouterMaper } from '../../Config';
const { SubMenu } = Menu;
const { Header, Content, Sider } = Layout;

export default () => {
  const location = useLocation();
  const pathSnippets = location.pathname.split('/').filter(i => i);
  const [collapsed, setcollapsed] = useState(false);
  let unValidateIndex = -1;
  let router_permission = useSelector(selectRouter_permission);
  let onCollapse = collapsed => {
    setcollapsed(collapsed);
  };
  const RouterPermission = routerName => {
    let index;
    if (Config.isDev)
      return (
        <Menu.Item key={index}>
          <NavLink to={'/pages/' + routerName}>{RouterMaper.get(routerName)}</NavLink>
        </Menu.Item>
      );
    if (router_permission != null) {
      index = router_permission.indexOf(routerName);
      if (index >= 0)
        return (
          <Menu.Item key={index}>
            <NavLink to={'/pages/' + routerName}>{RouterMaper.get(routerName)}</NavLink>
          </Menu.Item>
        );
      else
        return (
          <Menu.Item key={unValidateIndex--} disabled={true}>
            <NavLink to={'/pages/' + routerName}>{RouterMaper.get(routerName)}</NavLink>
          </Menu.Item>
        );
    }
  };
  const breadcrumbNameMap = {
    '/pages': '主页',
    '/pages/Register': '仪器注册',
    '/pages/Examine': '仪器审核',
    '/pages/Revise': '仪器修改',
    '/pages/DePermission': '角色权限',
    '/pages/UserManager': '用户管理',
    '/pages/DeConfig': '系统配置',
    '/pages/MyRegister': '录入记录',
    '/pages/InData': '仪器信息及查询',
    '/pages/InPresent': '仪器统计',
    '/pages/ModelMake': '模型制作',
    '/pages/MyRevise': '修改记录',
    '/pages/Delete': '仪器删除',
    '/pages/MyDelete': '删除记录',
    '/pages/SaleInfo': '销售信息',
    '/pages/ModelPlay': '模型场景播放',
    '/pages/ProcessManager': '审核流程控制',
    '/pages/DataDict': '数据字典',
    '/pages/ExamineHis': '审核历史',
  };
  const extraBreadcrumbItems = pathSnippets.map((_, index) => {
    const url = `/${pathSnippets.slice(0, index + 1).join('/')}`;
    return (
      <Breadcrumb.Item key={url}>
        <Link to={url}>{breadcrumbNameMap[url]}</Link>
      </Breadcrumb.Item>
    );
  });
  return (
    <Layout style={{ minHeight: '100vh' }}>
      <Header
        className="header"
        style={{ backgroundColor: '#096dd9', paddingLeft: '5px', paddingRight: '5px' }}
      >
        <Row align={'middle'} style={{ height: '64px' }}>
          <Col className="gutter-row" span={6}>
            <Logo></Logo>
          </Col>
          <Col className="gutter-row" span={12}></Col>
          <Col className="gutter-row" span={6}>
            <User></User>
          </Col>
        </Row>
      </Header>
      <Layout>
        <Sider
          width={200}
          className="site-layout-background"
          collapsible
          collapsed={collapsed}
          onCollapse={onCollapse}
          theme={'light'}
        >
          <Menu
            mode="inline"
            defaultSelectedKeys={[]}
            defaultOpenKeys={['1', '2', '3']}
            style={{ height: '100%', borderRight: 0 }}
          >
            <Menu.Item icon={<HomeOutlined />} title="主页">
              <NavLink to={'/pages/'}>主页</NavLink>
            </Menu.Item>
            <SubMenu key={'4'} icon={<EditOutlined />} title="仪器录入与记录">
              {RouterPermission('Register')}
              {RouterPermission('MyRegister')}
            </SubMenu>
            <SubMenu key={8} icon={<DeleteOutlined />} title="仪器删除与记录">
              {RouterPermission('Delete')}
              {RouterPermission('MyDelete')}
            </SubMenu>
            <SubMenu key={9} icon={<SnippetsOutlined />} title="仪器修改与记录">
              {RouterPermission('Revise')}
              {RouterPermission('MyRevise')}
            </SubMenu>
            <SubMenu key="1" icon={<BranchesOutlined />} title="个人办公">
              {RouterPermission('Examine')}
              {RouterPermission('ExamineHis')}
            </SubMenu>
            <SubMenu key="2" icon={<LaptopOutlined />} title="信息查询">
              <SubMenu key="5" title="仪器" icon={<ReconciliationOutlined />}>
                {RouterPermission('InData')}
                {RouterPermission('InPresent')}
              </SubMenu>
              {/* 
              <SubMenu key="102" title="销售" icon={<FundOutlined />}>
                {RouterPermission('SaleInfo')}
              </SubMenu> */}
            </SubMenu>
            <SubMenu key={12} icon={<UserOutlined />} title="用户与角色">
              {RouterPermission('DePermission')}
              {RouterPermission('UserManager')}
            </SubMenu>
            <SubMenu key="3" icon={<SettingOutlined />} title="系统管理">
              {RouterPermission('DeConfig')}
              {RouterPermission('ProcessManager')}
              {RouterPermission('DataDict')}
            </SubMenu>
            <SubMenu key={6} title="数据录入" icon={<CloudUploadOutlined />}>
              {RouterPermission('InBatch')}
              {RouterPermission('UserBatch')}
            </SubMenu>
            <SubMenu key={7} title="模型" icon={<ProjectOutlined />}>
              {RouterPermission('ModelMake')}
              {RouterPermission('ModelPlay')}
            </SubMenu>
          </Menu>
        </Sider>
        <Layout style={{ padding: '0 24px 24px' }}>
          <Header
            style={{
              borderRadius: '5px',
              margin: '5px 0',
              display: 'flex',
              justifyContent: 'left',
              alignItems: 'center',
              backgroundColor: 'white',
            }}
          >
            <Breadcrumb>{extraBreadcrumbItems}</Breadcrumb>
          </Header>
          <Content
            className="site-layout-background"
            style={{
              padding: 0,
              margin: 0,
              minHeight: 280,
            }}
          >
            <Outlet />
          </Content>
        </Layout>
      </Layout>
    </Layout>
  );
};
